<template>
  <screen-cell :title="'设备基础信息'">
    <div class="container">
      <div class="sidebar fy-flex fy-flex__center fy-flex__column">
        <div class="cell">
          <screen-title :title="'已接入设备总数'"></screen-title>
          <screen-num :num="'00' + num"></screen-num>
        </div>
      </div>
      <div class="content">
        <div class="title" :style="{width: '20vw', height:'4vh'}"><p>·设备数量分布·</p></div>
        <div ref="equipment-charts" :style="{width: '20vw', height:'21vh'}"></div>
      </div>
    </div>
  </screen-cell>
</template>

<script>
import ScreenCell from "@/components/common/ScreenCell.vue";
import ScreenTitle from "@/components/common/ScreenTitle.vue";
import ScreenNum from "@/components/common/ScreenNum.vue";
export default {
  // 全局感知
  name: "",

  // 模板依赖
  components: {
    ScreenCell,
    ScreenTitle,
    ScreenNum
  },
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      num: 24621,
      fontSize: 16
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    setInterval(() => {
      this.num += 14;
    }, 3000);
    this.initRemData();
    this.initData();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {
    initRemData() {
      let clientWidth = document.documentElement.clientWidth;
      if (clientWidth === undefined) return;
      this.fontSize = clientWidth / 220;
    },
    initData() {
      let chart = this.$echarts.init(this.$refs["equipment-charts"]);
      let fontSize = this.fontSize * 1.2;
      let option = {
        grid: {
          left: "1%",
          right: "1%",
          top: "1%",
          bottom: "1%",
          containLabel: true
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            roseType: "radius",
            radius: ["20%", "75%"],
            label: {
              normal: {
                show: true,
                fontSize: fontSize
              }
            },
            data: [
              {
                value: 59,
                name: "独立式烟感探测器 59",
                itemStyle: { color: "#37a2da" }
              },
              {
                value: 35,
                name: "充电桩状态 35",
                itemStyle: { color: "#30c6ea" }
              },
              {
                value: 87,
                name: "可燃气体检测 87",
                itemStyle: { color: "#9fe6b8" }
              },
              {
                value: 158,
                name: "电气火灾预警系统 158",
                itemStyle: { color: "#ffdb5c" }
              },
              {
                value: 109,
                name: "消防水箱水位 109",
                itemStyle: { color: "#ff9f7f" }
              },
              {
                value: 251,
                name: "室内消防栓 251",
                itemStyle: { color: "#fb7293" }
              },
              {
                value: 244,
                name: "自动喷水灭火系统 244",
                itemStyle: { color: "#e7bcf3" }
              },
              {
                value: 259,
                name: "火灾自动报警系统 259",
                itemStyle: { color: "#8378ea" }
              }
            ]
          }
        ]
      };
      chart.setOption(option, true);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 25.5vh;
  .sidebar {
    float: left;
    width: 35%;
    height: 100%;
    color: white;
    p {
      font-weight: 900;
      font-size: 3rem;
    }
    span {
      margin-left: 0.5rem;
      font-size: 2.5rem;
    }
  }
  .content {
    position: relative;
    float: left;
    width: 65%;
    height: 100%;
    .title {
      position: relative;
      width: 100%;
      p {
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 1.8rem;
        color: #bccbf1;
      }
    }
  }
}
</style>
